<template>
  <div class="room-frame com-flex-c com-center-c">
    <div class="title">设备信息</div>
    <div class="room-text com-flex-c">
      <div class="item">
        <div class="label">机柜名称：</div>
        <div class="value">{{ info.devName }}</div>
      </div>
      <div class="item">
        <div class="label">机柜所属机房：</div>
        <div class="value">{{ info.roomName }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";

const route = useRoute();
const props = ref([]);
const info = ref({});

onMounted(() => {
  const query = route.query ?? {};
  info.value = {
    devName: query?.devName ?? "--",
    roomName: query?.roomName ?? "--",
  };
  Object.keys(query).map((key) => {
    if (!["devName", "roomName"].includes(key)) {
      props.value.push({
        label: key,
        value: query[key],
      });
    }
  });
});
</script>

<style lang="scss" scoped>
.room-frame {
  width: 100%;
  height: 100vh;
  background: url("/imgs/8.png");
  background-size: 100% 100%;
  position: relative;

  .all-text {
    margin: 2% 0;
  }

  .title {
    display: flex;
    align-items: center;
    width: 92%;
    height: 9%;
    font-size: calc(var(--fs) * 0.5);
    color: #f3f8fd;
    line-height: 28px;
  }

  .room-text {
    flex: 1;
    width: 92%;
    margin-bottom: 2%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .info-label {
      font-size: calc(var(--fs) * 0.45);
      margin-left: 4%;
      color: #e4f0fe;
    }

    .item {
      color: #86a5cc;
      display: flex;
      margin-left: 8%;
      font-style: italic;
      font-size: calc(var(--fs) * 0.45);
    }

    .other-back {
      font-size: calc(var(--fs) * 0.45);
      display: flex;
      align-items: center;
      height: 8%;
      background-size: 100% 100%;
      padding-left: 4%;
      color: #f3f8fd;
    }
  }
}
</style>
